<!DOCTYPE>
<html>
<head>
    <title>聊天室</title>
    <script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <style>
        body {
            margin-top: 5px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-3">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">当前登录用户</h3>
                </div>
                <div class="panel-body">
                    <div class="list-group">
                        <span id="user"></span>
                    </div>
                </div>
            </div>
            <div class="panel panel-primary" id="online">
                <div class="panel-heading">
                    <h3 class="panel-title">当前在线的其他用户</h3>
                </div>
                <div class="panel-body">
                    <div class="list-group" id="users">
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-9">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title" id="talktitle"></h3>
                </div>
                <div class="panel-body">
                    <div class="well" id="log-container" style="height:400px;overflow-y:scroll">

                    </div>
                    <input type="text" id="myinfo" class="form-control col-md-12"/> <br>
                    <button id="send" type="button" class="btn btn-primary">发送</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    Date.prototype.format = function (fmt) {
        var o = {
            "M+": this.getMonth() + 1,                 //月份
            "d+": this.getDate(),                    //日
            "h+": this.getHours(),                   //小时
            "m+": this.getMinutes(),                 //分
            "s+": this.getSeconds(),                 //秒
            "q+": Math.floor((this.getMonth() + 3) / 3), //季度
            "S": this.getMilliseconds()             //毫秒
        };
        if (/(y+)/.test(fmt)) {
            fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        }
        for (var k in o) {
            if (new RegExp("(" + k + ")").test(fmt)) {
                fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
            }
        }
        return fmt;
    }


    $(document).ready(function () {

        if ('WebSocket' in window) {
            websocket = new WebSocket("ws://127.0.0.1:8080/lili/webSocket/" + getUrlParam('name'));
        }

        $("#user").html(getUrlParam('name'));
        // 指定websocket路径
        var websocket;
        websocket.onmessage = function (event) {
            var data = JSON.parse(event.data);
            console.log(data)
            if (data.messageType === 'ONLINE') {
                resetUsers(data.users);
                return;
            }
            // 普通消息
            // 接收服务端的实时消息并添加到HTML页面中
            $("#log-container").append("<div class='bg-info'><label class='text-danger'>" + data.from + "&nbsp;" + data.date + "</label><div class='text-success'>" + data.text + "</div></div><br>");
            // 滚动条滚动到最低部
            scrollToBottom();
        };


        $("#send").click(function () {
            if ($("body").data("to") == undefined) {
                alert("请选择聊天对象");
                return false;
            }
            var data = {};
            data["from"] = getUrlParam('name');
            data["to"] = $("body").data("to");
            data["text"] = $("#myinfo").val();
            websocket.send(JSON.stringify(data));
            $("#log-container").append("<div class='bg-success'><label class='text-info'>我&nbsp;" + new Date().format("yyyy-MM-dd hh:mm:ss") + "</label><div class='text-info'>" + $("#myinfo").val() + "</div></div><br>");
            scrollToBottom();
            $("#myinfo").val("");
        });

    });


    function talk(a) {
        $("#talktitle").text("与" + a.innerHTML + "的聊天");
        $("body").data("to", a.innerHTML);
    }

    function scrollToBottom() {
        var div = document.getElementById('log-container');
        div.scrollTop = div.scrollHeight;
    }

    //重新写入用户
    function resetUsers(users) {
        $("#users").html("");
        for (var i = 0; i < users.length; i++) {
            if (getUrlParam('name') !== users[i]) {
                $("#users").append('<a href="#" onclick="talk(this)" class="list-group-item">' + users[i] + '</a>');
            }
        }
    };

    function getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
        var r = window.location.search.substr(1).match(reg); //匹配目标参数
        if (r != null) return unescape(r[2]);
        return null; //返回参数值
    }
</script>

</body>
</html>
